<template>
	<el-container direction="vertical">
		<el-header class="header-tabs">
			<el-tabs type="card" v-model="curComponent">
				<el-tab-pane
					v-for="item in tagList"
					:key="item.component"
					:label="item.label"
					:name="item.component"
				></el-tab-pane>
			</el-tabs>
		</el-header>
		<keep-alive :max="10">
			<component :is="curComponent" />
		</keep-alive>
	</el-container>
</template>

<script>
import { ref } from "vue";
import info from "./components/info/index.vue";
import communicationRecord from "./components/communication-record/index.vue";

export default {
	name: "detail",
	components: {
		info,
		communicationRecord
	},
	setup() {
		const tagList = [
			{
				label: "个人信息",
				component: "info",
			},
			{
				label: "沟通记录",
				component: "communicationRecord",
			},
		];

		const curComponent = ref("info");

		return {
			tagList,
			curComponent,
		};
	},
};
</script>

<style></style>
